<template>
  <div class="framework" v-if="showFramework">
    <div class="container">
      <div class="header">
        <div class="logo">
          <svg
            t="1744254124502"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1773"
            width="20"
            height="20"
          >
            <path
              d="M291.6 560.3c1.8 1.9 176.5 186.9 202 160.8 25.7-26.2 13.4-18.6 18-26.4 4.6-7.7-218.2-133.4-220-134.4z m543.8-288.8c99.9 10.1 202.4 191.2 109.5 230.2-64.5 27.1-175.5 345.7-175.5 345.7s-145.5 51-258 34.5c-29.9-4.4-60.2-91.7-123.8-104.3-53.2-10.5-59.2 36.8-100.5 33C236 806.1 275 702.9 247.5 687c-46.5-27-117-48.8-120.7-75.8-7.3-52.6 58.5-63.7 84.7-100.5s-105.8-93.4-15-179.2c83.2-78.7 158.2 25.5 204.7 17.3 83.7-14.8 6.5-101.1 88.5-135.7 78-33 138 144.7 210.7 147 42.9 1.2 76.9-94.5 135-88.6z m-72 403.8c7.2 3 86.8-189.5 86.8-189.5S713.3 644.6 738.7 663.1c25.5 18.4 17.5 9.2 24.7 12.2z m-105.6 87.5c10-2.1-81.3-345.7-81.3-345.7s3.2 346.4 45.4 350.2c42.3 3.6 26-2.4 35.9-4.5z"
              fill="#6AAF51"
              p-id="1774"
            ></path>
            <path
              d="M850.2 485.9s-79.6 192.5-86.8 189.5c-7.2-3 0.8 6.2-24.7-12.3-25.4-18.5 111.5-177.2 111.5-177.2zM576.5 420s91.3 343.6 81.3 345.7c-10 2.1 6.3 8.2-35.9 4.4-42.2-3.6-45.4-350.1-45.4-350.1zM293.1 560.9c1.7 1 224.6 126.7 220 134.5-4.6 7.8 7.7 0.2-18 26.4-25.5 26-200.2-159-202-160.9z"
              fill="#EDF286"
              p-id="1775"
            ></path>
          </svg>
          <p>TT云盘</p>
        </div>

        <div class="right-nav">
          <el-popover
            class="right-nav-custom-popover"
            :width="800"
            trigger="click"
            placement="bottom-end"
            v-model:visible="showUploader"
          >
            <template #reference>
              <el-icon class="download-icon">
                <Download />
              </el-icon>
            </template>
            <template #default>
              <div>
                <Uploader
                  ref="uploaderRef"
                  @uploadCallback="handleuploadCallback"
                ></Uploader>
              </div>
            </template>
          </el-popover>
          <el-dropdown placement="bottom-start">
            <div class="user-info">
              <div class="user-avatar">
                <MyAvatar
                  :userId="userInfo?.userId"
                  :avatr="userInfo?.avatar"
                  :timestamp="timestamp"
                ></MyAvatar>
              </div>
              <span>{{ userInfo.nickName }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="openAvatarDialog">
                  <span>修改头像</span>
                </el-dropdown-item>
                <el-dropdown-item @click="openPasswordDialog">
                  <span>修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item @click="logout">
                  <span>退出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="body">
        <div class="left-sider">
          <div class="slider-item">
            <div
              v-for="menu in menus"
              :key="menu.menuCode"
              class="slider-items"
              :class="{ active: activeMenu === menu.menuCode }"
              @click="selectMainMenu(menu)"
            >
              <template v-if="menu.allshow">
                <el-icon>
                  <component :is="menu.icon" />
                </el-icon>
                <span>{{ menu.title }}</span>
              </template>
            </div>
          </div>
        </div>

        <div class="sub-slider-container" v-if="selectedMainMenu">
          <div class="sub-slider-item">
            <div
              v-for="subMenu in selectedMainMenu.children"
              :key="subMenu.path"
              class="slider-items"
              :class="{
                active: activeMenu === (subMenu.category || subMenu.menuCode),
              }"
              @click="jumpTo(subMenu)"
            >
              <el-icon>
                <component :is="subMenu.icon" />
              </el-icon>
              <span>{{ subMenu.title }}</span>
            </div>
          </div>
          <div class="sp-info">
            <p>空间使用</p>

            <div class="per">
              <el-progress :percentage="spacePercent" :stroke-width="8">
                <template #default="{ percentage }">
                  <div class="custom-progress-text">{{ percentage }}%</div>
                </template></el-progress
              >
            </div>
            <div class="space">
              <div>
                {{ formatBytes(UserInfoSpace.useSpace) }} /
                {{ formatBytes(UserInfoSpace.totalSpace) }}
              </div>
              <div class="refresh" @click="getUserSpace()">
                <el-icon><Refresh /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <div class="body-content">
          <router-view v-slot="{ Component }">
            <component
              :is="Component"
              @addfile="addfile"
              ref="mainComponent"
            ></component>
          </router-view>
        </div>
      </div>
    </div>
    <updateAvatar ref="updateAvatarRef" @updateAvatar="reloadAvatar" />
    <Updatepassword ref="updatePasswordRef" />
  </div>
  <router-view v-else v-slot="{ Component }">
    <component :is="Component" @addfile="addfile"></component>
  </router-view>
</template>

<script setup>
import Uploader from "@/views/main/Uploader.vue";
import updateAvatar from "../UpdateAvatar/updateAvatar.vue";
import Updatepassword from "./Updatepassword.vue";
import formatBytes from "@/utils/bit.js";
import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  onMounted,
  computed,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import UpdateAvatar from "../UpdateAvatar/updateAvatar.vue";
//文件上传
const showUploader = ref(false);
const uploaderRef = ref();
const mainComponent = ref();
const currentFolder = ref({ fileId: 0 });
const addfile = (filedata) => {
  const { file, filePid } = filedata;
  currentFolder.value.fileId = filePid;
  showUploader.value = true;
  uploaderRef.value.addfile(file, filePid);
};
const api = {
  logout: "/logout",
  getSpace: "/getUseSpace",
};
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

const handleuploadCallback = (data) => {
  nextTick(() => {
    if (mainComponent) {
      mainComponent.value.refresh(currentFolder.value.fileId);
      getUserSpace();
    }
  });
};
const menus = [
  {
    icon: "HomeFilled",
    title: "首页",
    menuCode: "home",
    allshow: true,
    path: "/main/all",
    children: [
      {
        icon: "PartlyCloudy",
        title: "所有",
        category: "all",
        path: "/main/all",
      },
      {
        icon: "VideoPlay",
        title: "视频",
        category: "video",
        path: "/main/video",
      },
      {
        icon: "Camera",
        title: "音频",
        category: "music",
        path: "/main/music",
      },
      {
        icon: "Picture",
        title: "图片",
        category: "image",
        path: "/main/image",
      },
      {
        icon: "document",
        title: "文档",
        category: "doc",
        path: "/main/doc",
      },
      {
        icon: "More",
        title: "其他",
        category: "others",
        path: "/main/others",
      },
    ],
  },
  {
    icon: "Share",
    title: "分享",
    menuCode: "recycle",
    allshow: true,
    path: "/share",
    children: [
      {
        icon: "Share",
        path: "/share",
        title: "分享记录",
        category: "share",
      },
    ],
  },
  {
    icon: "Delete",
    title: "回收站",
    menuCode: "delete",
    tips: "暂无",
    allshow: true,
    path: "/recycle",
    children: [
      {
        icon: "Delete",
        path: "/recycle",
        category: "del",
        title: "回收站",
      },
    ],
  },
  {
    icon: "Setting",
    title: "设置",
    menuCode: "settings",
    tips: "暂无",
    allshow: false,
    path: "/settings/fileList",
    children: [
      {
        icon: "Folder",
        title: "用户文件",
        path: "/settings/fileList",
        category: "fileList",
      },
      {
        icon: "User",
        title: "用户管理",
        path: "/settings/userList",
        category: "userList",
      },
      {
        icon: "Setting",
        title: "系统设置",
        path: "/settings/sysSetting",
        category: "sysSetting",
      },
    ],
  },
];
const userInfo = ref(proxy.VueCookies.get("userInfo"));

if (userInfo) {
  if (userInfo.value.admin == true) {
    menus.map((i) => {
      i.allshow = true;
    });
  }
}
const timestamp = ref(0);
const activeMenu = ref("alls");
const selectedMainMenu = ref(null);
const updateAvatarRef = ref(null);
const updatePasswordRef = ref(null);
const openPasswordDialog = () => {
  updatePasswordRef.value.changeshow();
};
const openAvatarDialog = () => {
  updateAvatarRef.value.changeshow(userInfo.value);
};
const reloadAvatar = () => {
  timestamp.value = new Date().getTime();
};
const selectMainMenu = (menu) => {
  activeMenu.value = menu.menuCode;
  selectedMainMenu.value = menu;

  router.push(menu.path);
};

// 页面加载时默认选中第一个一级菜单的第一个二级菜单
onMounted(() => {
  if (menus.length > 0) {
    selectMainMenu(menus[0]);
  }
  getUserSpace();
});

const jumpTo = (menu) => {
  activeMenu.value = menu.category || menu.menuCode;
  if (!menu.path || menu.menuCode === activeMenu.value) {
    return;
  }
  if (mainComponent.value.loadDataListByCategory) {
    mainComponent.value.loadDataListByCategory(menu.category);
  }
  router.push(menu.path);
};

// 动态获取图标组件
// const getIcon = (iconName) => {
//   return ElementPlusIcons[iconName] || null;
// };

//退出登录
const logout = async () => {
  proxy.confirm("确定退出吗", async () => {
    let result = await proxy.request({
      url: api.logout,
    });
    if (!result) {
      return;
    }
    proxy.VueCookies.remove("userInfo");
    router.push("/login");
  });
};
//获取用户空间
const UserInfoSpace = ref({ useSpace: 0, totalSpace: 1 });
const spacePercent = ref(3);
watch(
  () => UserInfoSpace.value,
  (newVal, oldVal) => {
    spacePercent.value = (
      (newVal?.useSpace / newVal?.totalSpace) *
      100
    ).toFixed(2);
  },
  { deep: true }
);

const getUserSpace = async () => {
  let result = await proxy.request({
    url: api.getSpace,
    showLoading: false,
  });
  if (!result) {
    return;
  }
  UserInfoSpace.value = result.data;
};
// 判断是否显示框架布局
const showFramework = computed(() => {
  // 这里可以根据需要添加更多的条件
  return !route.path.startsWith("/myshare");
});
</script>

<style scoped lang="scss">
.sub-slider-container {
  width: calc(100% * 0.1 / 1);
  background-color: #f0f2f5;
  overflow-y: auto;
}
.custom-progress-text {
  font-size: 14px;
  color: #000000;
  margin-left: 0.55rem;
  font-weight: bold;
}
.container {
  // min-height: 90vh;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.body-content {
  // padding: 20px 5px 5px 0px;
  height: 100%;
  box-sizing: border-box;
  width: calc(100% * 0.85 / 1);
  background-color: #ffffff;
}
.framework {
  height: 100vh;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  box-sizing: border-box;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.108);
  background-color: #ffffff;
  z-index: 4;
  .logo {
    display: flex;
    align-items: center;

    p {
      font-size: 20px;
      margin-left: 10px;

      margin-top: 5px;
    }

    svg {
      width: 40px;
      height: 40px;
    }
  }
}

.right-nav {
  display: flex;
  width: 10%;
  justify-content: flex-end;
  align-items: center;

  .user-info {
    display: flex;
    align-items: center;
    border: none;
    .user-avatar {
      margin-right: 10px;
    }
  }

  .download-icon {
    transform: scale(1.5);
    margin-right: 65px;
    cursor: pointer;
    width: 30px;
    height: 30px;
  }
}

*:focus-visible {
  outline: none;
}

.body {
  display: flex;
  width: 100%;
  height: 100% !important;
  // min-height:93vh;
  align-items: stretch;
}

.left-sider {
  width: calc(100% * 0.05 / 1);
  background-color: #f5f5f5;
  padding: 20px 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  .slider-item {
    width: 100%;
  }

  .slider-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    cursor: pointer;
    padding: 10px 0;
    transition: color 0.3s ease;

    &:hover {
      background-color: #f0f0f0;
    }

    &.active {
      color: rgb(38, 103, 244) !important;
    }

    .el-icon {
      margin-bottom: 5px;
      font-size: 24px;
    }

    span {
      font-size: 12px;
      text-align: center;
    }
  }
}

.sub-slider-container {
  background-color: #ffffff;
  border-right: 1px solid #e8e8e8;
  padding: 20px 10px;
  display: flex;
  // height: 90%;
  flex-direction: column;
  .sub-slider-item {
    display: flex;
    flex-direction: column;
    .slider-items {
      display: flex;
      align-items: center;
      padding: 10px;
      cursor: pointer;
      transition: color 0.3s ease;

      &:hover {
        background-color: #f0f0f0;
      }

      &.active {
        color: rgb(58, 146, 240) !important;
      }

      .el-icon {
        margin-right: 10px;
        font-size: 18px;
      }

      span {
        font-size: 14px;
      }
    }
  }
  .sp-info {
    margin-top: auto;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    .space {
      margin-top: 0.5rem;
      font-size: 0.55rem;
      display: flex;
      justify-content: space-between;
      // background-color: #37a2f3;
      .refresh {
        cursor: pointer;
        transform: scale(1.5);
        display: flex;
        align-items: center;

        // background-color: #37a2f3;
      }
    }
    .per {
    }
    p {
      font-size: 12px;
      color: #666;
      padding-left: 0.5rem;
      position: relative;
      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 3px;
        height: 13px;
        background-color: #37a2f3;
      }
    }
  }
}

.left-sider .slider-items.active,
.sub-slider-container .slider-items.active {
  color: rgb(58, 146, 240) !important;
  transition: color 0.3s ease;
}

.left-sider .slider-items.active .el-icon,
.sub-slider-container .slider-items.active .el-icon {
  color: rgb(58, 146, 240) !important;
}
</style>